<template>
  <div class="customer-service">

    <header @click="navigateToMyPage"><svg t="1719393851405" class="icon1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2732" width="16" height="16"><path d="M631.04 161.941333a42.666667 42.666667 0 0 1 63.061333 57.386667l-2.474666 2.730667-289.962667 292.245333 289.706667 287.402667a42.666667 42.666667 0 0 1 2.730666 57.6l-2.474666 2.752a42.666667 42.666667 0 0 1-57.6 2.709333l-2.752-2.474667-320-317.44a42.666667 42.666667 0 0 1-2.709334-57.6l2.474667-2.752 320-322.56z" fill="#707070" p-id="2733"></path></svg><span>常见问题</span></header>
    <div style="background-color: #eeeeee; height: 40px;">
      <span style="font-size: 15px; line-height: 40px; margin-left: 10px">问题类型</span>
    </div>
    <div class="common-questions">

      <ul>

        <li v-for="(question, index) in questions" :key="index">
          <a class="zmban" style="color: black; font-size: 15px; ">{{ question }}<svg style="float: right; margin-right: 10px" t="1719400292352" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5981" width="16" height="16"><path d="M658.56 557.392L322.536 221.384l45.248-45.256 336.016 336.008z" p-id="5982" fill="#bfbfbf"></path><path d="M704.088 512.2L364.12 852.16l-45.256-45.248 339.976-339.976z" p-id="5983" fill="#bfbfbf"></path></svg></a>
        </li>
      </ul>
    </div>

  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
// 使用 useRouter 钩子获取 router 实例
const router = useRouter();
const questions = ref([
  '账号被找回，怎么办？',
  '账号被找回，怎么办？',
  '账号被找回，怎么办？',
  '账号被找回，怎么办？',
  '账号被找回，怎么办？'
]);
//点击
const navigateToMyPage = () => {
  router.push({ path: 'kef' });
};

</script>

<style scoped>
img{
  color: #007bff;
}
.customer-service {
  font-family: Arial, sans-serif;
  max-width: 400px;
  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
}

header {
  background-color: #f5f5f5;
  padding: 10px;
  text-align: center;
  font-size: 18px;
  border-bottom: 1px solid #ddd;
}

.actions {
  display: flex;
  justify-content: space-around;
  padding: 20px;
  background-color: #fff;
}

.action {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.action img {
  width: 40px;
  height: 40px;
  margin-bottom: 5px;
}

.action span {
  font-size: 14px;
  color: #333;
}

.common-questions {
  padding: 10px;
  background-color: #fff;
}

.common-questions header {
  font-size: 16px;
  margin-bottom: 10px;
  color: #333;
}

.view-all {
  float: right;
  font-size: 14px;
  color: #007bff;
  cursor: pointer;
}

.view-all:hover {
  text-decoration: underline;
}

.common-questions ul {
  list-style: none;
  padding: 0;
}

.common-questions li {
  padding: 10px 0;
  border-top: 1px solid #eee;
}

.common-questions li a {
  text-decoration: none;
  color: #007bff;
}

.common-questions li a:hover {
  text-decoration: underline;
}

footer {
  background-color: #f5f5f5;
  padding: 10px;
  text-align: center;
  font-size: 16px;
  border-top: 1px solid #ddd;
}

.online-service {
  cursor: pointer;
  color: #007bff;
}

.online-service:hover {
  text-decoration: underline;
}
.icon1{
  float: left;
}

.view-all{
  color: #cccccc;
}
.ziaxiankefu{
  margin-top: 170px;
}

</style>
